<template>
<div>
  <div class="hint">{{item.hint}}</div>
  <template v-if="!value || !value.length">
    <el-popover
      placement="bottom-start"
      width="200"
      :disabled="disabled"
      @show="showPopover"
      trigger="click">
      <div class="code-div">
        <div v-if="codeUrl">
          <vue-qr ref="Qrcode" :text="codeUrl" :margin="0" :size="70"></vue-qr>
          <div class="tip">扫码二维码添加手写签名</div>
        </div>
        <div v-if="signImg.url">
          <div>您要使用下方签名吗？</div>
          <img class="icon-img" :src="signImg.url" alt="" style="max-width: 100px;transform: rotate(90deg)">
          <div>
            <el-button class="cancel" size="mini" @click.stop="resetUrl">重新手写</el-button>
            <el-button size="mini" type="primary"  @click.stop="saveFun">使用</el-button>
          </div>
        </div>
      </div>
      <div class="sign-btn" slot="reference">
        <i class="V7_iconfont V7_iconV7tubiao_qianming"></i><span>添加签名</span>
      </div>
    </el-popover>
  </template>
  <uploadList v-else @remove="remove" v-bind="$attrs" :list="value" v-on="$listeners" class="uploadList" :isHiddenDelBtn="disabled"></uploadList>
</div>
</template>
<script lang="ts">
import { Component, Vue, Prop, Mixins, Watch } from 'vue-property-decorator';
import widgetCommon from '../common/widgetCommon';
import vueQr from 'vue-qr'
import { CommonModule } from '@/store/modules/common'
import { commonAction, uuid } from '@/utils/common'
import { businessStore } from '@/afterSales/views/business/store/business'
import uploadList from '@/afterSales/components/uploader/uploadList.vue';
@Component({
  components: {
    vueQr,
    uploadList
  }
})
export default class extends Mixins(widgetCommon) {
  [x: string]: any;
  @Prop({ default: '' }) public modelId!: string
  @Prop({ default: '' }) public orderId!: string
  private codeUrl = ''
  private signImg = {
    url: '',
    fileName: ''
  }

  private get qrCode () {
    return (CommonModule.initConfig as any).platformConfig?.saleSignUrl || ''
  }

  private get userId () {
    return (this.$store as any).state.common.session.user._id
  }

  private saveFun () {
    this.changeValue([this.signImg])
  }

  @Watch('signArr')
  public signObjChange (val) {
    if (val.length) {
      // this.value = this.signArr
      this.changeValue(val)
      businessStore.signObj = {}
    }
  }

  private remove () {
    this.codeUrl = ''
    this.changeValue([])
  }

  private get signArr () {
    if (this.item.businessId === businessStore?.signObj.signBusinessId) {
      return businessStore?.signObj?.signRecordList || []
    } else {
      return []
    }
  }

  private resetUrl () {
    this.changeValue([])
    this.signImg = {
      url: '',
      fileName: ''
    }
    this.getUrl()
  }

  private getUrl () {
    commonAction({
      url: '/server-work/action/sign/short/swap/url',
      method: 'post',
      data: {
        messageId: uuid(),
        modelId: this.modelId,
        orderId: this.orderId,
        userId: this.userId,
        usePre: this.item.usePre,
        signBusinessId: this.item.businessId
      }
    }).then(res => {
      if (res.success) {
        this.codeUrl = res.data
      }
    })
  }

  private getSignature () {
    commonAction({
      url: '/server-work/action/signature/search',
      method: 'post',
      data: {
        userId: this.userId
      }
    }).then(res => {
      if (res.success) {
        if (!res.data) {
          this.getUrl()
        } else {
          if (res.data?.signRecordList.length) {
            this.signImg = res.data?.signRecordList[0]
          }
        }
      }
    })
  }

  private showPopover () {
    this.signImg = {
      url: '',
      fileName: ''
    }
    this.codeUrl = ''
    if (this.item.usePre) {
      this.getSignature()
    } else {
      this.getUrl()
    }
  }
}
</script>
<style scoped lang="stylus">
>>>.uploader-item {
  .icon-img {
    transform: rotate(90deg);
    border-radius: 0px !important;
    object-fit: contain !important;
  }
  .file-item:hover .uploader-handlers {
    display: flex !important;
    height: 100px !important;
    top: 0px !important;
    align-items: center;
    background: rgba(0,0,0,0.2);
  }
}
.code-div {
  text-align: center;
}
.tip {
  font-weight: 400;
  color: #767E91;
  line-height: 20px;
}
.hint {
  font-weight: 400;
  color: #767E91;
  font-size: 12px;
  line-height: 14px
  margin-bottom: 5px;
}
.sign-btn {
  border: 1px dashed #E7E9ED;
  border-radius: 4px;
  width: 240px;
  height: 64px;
  display: flex;
  cursor pointer
  justify-content: center;
  align-items: center;
  i {
    color: #B3B9C7;
    font-size: 14px
  }
  span {
    font-weight: 400;
    color: #303753;
  }
}
</style>
